<script setup lang="ts">
import { reactive, ref, toRaw } from "vue";
import {
  onLoad,
  onPageScroll,
  onReachBottom,
  onUnload,
} from "@dcloudio/uni-app";
import { useList } from "@/hooks/page";
import {
  travel_agency_task_index_header_api,
  travel_agency_task_index_list_api,
} from "@/package/square/api/new_guide";
import { autoTask } from "@/utils/timer";
import { Date } from "@/utils/date";
import { numToDay } from "@/utils/number";
import { Router } from "@/utils/router";
import { Toast } from "@/utils/toast";

import PageSticky from "@/components/page/sticky.vue";
import ListEmpty from "@/components/list/empty.vue";
import ListTaskItem from "./components/list-task-item.vue";
import ListMore from "@/components/list/more.vue";
import PopupModal from "@/components/popup/modal.vue";

onLoad(() => {
  travel_agency_task_index_header_api().then((resp) => {
    typeList.value = resp.task_type;
  });

  reloadList().then(() => {
    autoTaskStop = autoTask({ delay: 1000, immediate: true }, () => {
      const timestamp = Date.timestamp;

      listData.value = listData.value.map((i) => {
        if (i.is_emergency === 1 && i.start_time > timestamp) {
          // 急单才有倒计时
          i.start_time_arr = numToDay(i.start_time - timestamp).split(":");
        }
        return i;
      });
    });
  });
});
onPageScroll(() => (listLoadMore.value = listData.value.length > 1));
onReachBottom(() => loadMoreList());
onUnload(() => autoTaskStop?.());

const queryData = { end_area_id: "", type: 0 };

const cityName = ref("全国");
const cityClick = () => {
  Router.navigateTo("/package/other/pages/destination/index", (resp) => {
    resp.eventChannel.emit("ev-destination-data", {
      title: "目的地搜索",
    });
    resp.eventChannel.once("ev-destination-data", (resp) => {
      if (resp) {
        queryData.end_area_id = resp.id;
        cityName.value = resp.name;
        reloadList();
        Router.navigateBack();
      }
    });
  });
};
const searchClick = () => {
  Router.navigateTo("/package/square/pages/task/search");
};
const createClick = () => {
  popupModal.value?.show({
    content: "功能开发中，敬请期待",
    showCancel: false,
    confirmText: "我知道了",
  });
};

const typeList = ref<any[]>([]);
const typeClick = (id: number) => {
  queryData.type = id;
  reloadList();
};

const taskClick = (index: number) => {
  // Router.navigateTo(
  //   `/package/square/pages/task/detail?id=${listData.value[index].id}`
  // );
  Router.navigateTo(
    `/package/require/pages/detail/index?id=${listData.value[index].id}`
  );
};

const { listData, listStatus, listLoadMore, reloadList, loadMoreList } =
  useList({ page: 1, page_size: 10 }, (query) => {
    return travel_agency_task_index_list_api({ ...query, ...toRaw(queryData) });
  });

let autoTaskStop: (() => void) | undefined = undefined;
const popupModal = ref<InstanceType<typeof PopupModal>>();
</script>

<template>
  <PageSticky>
    <view class="list-search">
      <view class="list-search-city" @click="cityClick">
        {{ cityName }}
        <image
          class="list-search-city2"
          src="@/package/square/static/task-list-arrow.png"
        />
      </view>
      <view class="list-search-bar" @click="searchClick">
        <image class="list-search-icon" src="/static/index-search.png" />
        搜索关键词
      </view>
      <view class="list-search-btn" @click="createClick">
        <image
          class="list-search-btn2"
          src="@/package/square/static/task-list-create.png"
        />
        发布
      </view>
    </view>

    <view class="list-type">
      <view
        class="list-type-item"
        :class="{ 'list-type-active': queryData.type === i.id }"
        v-for="i of typeList"
        :key="i.id"
        @click="typeClick(i.id)"
      >
        {{ i.name }}
      </view>
    </view>
  </PageSticky>

  <view
    class="list-empty"
    v-if="listStatus === 'noMore' && listData.length === 0"
  >
    <ListEmpty text="无符合条件的任务" />
  </view>
  <view class="list-data" v-else>
    <view class="list-data-wrapper">
      <view
        class="list-data-item"
        v-for="(i, d) of listData"
        :key="i.id"
        @click="taskClick(d)"
      >
        <ListTaskItem :info="i" />
      </view>
    </view>
    <ListMore v-if="listLoadMore" :status="listStatus" />
  </view>

  <PopupModal ref="popupModal" />
</template>

<style lang="scss">
.list-search {
  display: flex;
  align-items: center;
  height: 108rpx;
  padding: 0 30rpx;

  .list-search-city,
  .list-search-btn {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    font-size: 28rpx;
    color: #333333;
    line-height: 40rpx;
  }

  .list-search-city2 {
    width: 16rpx;
    height: 16rpx;
    margin-left: 10rpx;
  }

  .list-search-bar {
    display: flex;
    align-items: center;
    flex-grow: 1;
    height: 64rpx;
    padding-left: 30rpx;
    margin-left: 30rpx;
    margin-right: 20rpx;
    font-size: 24rpx;
    color: #cccccc;
    border-radius: 36rpx;
    border: 2rpx solid rgba(255, 121, 0, 0.1);
    background-color: rgba(255, 255, 255, 0.9);
  }

  .list-search-icon {
    width: 32rpx;
    height: 32rpx;
    margin-right: 20rpx;
  }

  .list-search-btn {
    padding: 0 10rpx;
    color: #ff7900;
    font-weight: bold;
  }

  .list-search-btn2 {
    width: 32rpx;
    height: 32rpx;
    margin-right: 10rpx;
  }
}

.list-type {
  display: flex;
  align-items: center;
  height: 76rpx;
  padding-left: 30rpx;

  .list-type-item {
    padding: 10rpx;
    margin-right: 20rpx;
    font-size: 26rpx;
    color: #666666;
    line-height: 36rpx;
  }

  .list-type-active {
    color: #ff7900;
    font-weight: bold;
  }
}

.list-empty {
  height: calc(100vh - 184rpx - env(safe-area-inset-bottom));
}

.list-data {
  .list-data-wrapper {
    padding-top: 20rpx;
  }

  .list-data-item {
    margin: 0 20rpx 20rpx;
  }
}
</style>